<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!--[if IE]>
        <script type="text/javascript" src="../js/excanvas.js"></script>
        <script type="text/javascript" src="../js/base64.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/mapstraction.js"></script>
    <script type="text/javascript" src="../js/prototype.js"></script>
    <script type="text/javascript" src="../js/flotr-0.2.0-alpha.js"></script>
    <script type="text/javascript" src="../js/canvastext.js"></script>
    <script type="text/javascript" src="../js/ObjTree.js"></script>
    <script type="text/javascript" src="../js/tools4gps.js"></script>
</head>

<body>

<div id="profile" style="width:580px; height:260px;"></div>

<script type="text/javascript">
    GPS.setI18N('es');
    var parser = new GPS.Parser("gpsdata/090110-MarchaDelMetra.gpx");
    parser.run(function (gpsData) {
        var chart = new GPS.Profile("profile", gpsData, {
            x: 'dist',             // Propiedad a emplear en el eje x. Los valores
                                   // permitidos son 'dist', 'dist3d' o 'hour'.
            y: 'elev',             // Propiedad a emplear en el eje y. Los valores 
                                   // permitidos son 'elev', 'vel', 'vel3d' o 'heartRate'.
            colors: ['red', '#ffbb00'],  // El primer color es el por defecto para perfiles
                                   // de distancia, el segundo para perfiles de tiempo.
            join: true,            // Si es true, une los diferentes segmentos y recorridos.
            trackingEnabled: true, // Si es true, muestra valores x-y en una esquina del gráfico.
            zoomEnabled: true,     // Si es true, permite la selección y ampliación con el ratón.
            xFactor: 1000,         // Factores multiplicadores para conversión de unidades.
            yFactor: null,         // Si es null, se usarán los factores de i18n (ver localización).
            xDecs: 0,              // Número de decimales para los valores x/y de la caja de seguimiento.
            yDecs: null,           // Si es null, se usan los valores de i18n (ver localización).
            xUnit: 'm',            // Sufijo para las etiquetas de los ejes X/Y. 
            yUnit: null,           // Si es null, se usarán las unidades de i18n (ver localización).
            minDeltaX: 0.05,       // Filtro para dibujar los puntos en el eje x.
            wpt: {                 // Si es false no muestra los hitos, si no...
                color: '#cc4400',      // Color primario usado para el borde.
                points: {
                    radius: 4,             // Radio de los puntos (píxeles).
                    lineWidth: 2,          // Ancho de borde en píxeles.
                    fill: true,            // Si es true rellena los puntos con un color.
                    fillColor: '#aa0000'   // Color de relleno.
                }
            },
            trk: {                 // False para no mostrar los recorridos, si no...
                color: '#aa4400',      // Color de la línea.
                lines: {
                    lineWidth: 1,      // Ancho de la línea en píxeles.
                    fill: true,        // Si es true rellena el área por debajo de la línea al 
                                       // eje x, falso para no rellenar (transparente).
                    fillOpacity: 0.6   // Opacidad del color de relleno, (1 solido)
                }
            },
            rte: false,            // False para no mostrar las rutas, si no, similar a trk.
            grid: {
                color: '#666600',      // Color primario usado para bordes y etiquetas.
                backgroundColor:'#eec',// Null para transparente, si no, color.
                tickColor: '#dddd99',  // Color usado para las etiquetas.
                labelMargin: 3         // Margen en píxeles.
            },
            xaxis: {               // Parámetros comúnes a xaxis e yaxis.
                min: 10000,               // Valor mín. a mostrar, null para establecer automáticamente.
                max: 30000                // Valor máx. a mostrar, null para establecer automáticamente.
            },
            yaxis: {               // Parámetros comúnes a xaxis e yaxis.
                noTicks: 8,            // Número de etiquetas generadas automáticamente.
                tickFormatter: function(n) {    
                    return n + ' m'        // function: number -> string
                }, 
                tickDecimals: null,    // Número de decimales, null para establecer automáticamente.
                autoscaleMargin: 0.2   // Margen adicional en % si min/max se establece automáticamente.
            },
            selection: {
                mode: 'xy',            // Puede ser null, 'x', 'y' o 'xy'.
                color: '#ffB6D9',      // Color de la caja de selección.
                fps: 10                // Frames-por-segundo.
            },
            mouse: {
                position: 'ne',        // Posición de visualización de valores (sureste por defecto).
                trackFormatter: function(obj) {  // Aplica formato a los valores visualizados.
                    return '(' + obj.x + ', ' + obj.y + ')'
                }, 
                margin: 6,             // Márgen en píxeles de la caja de valores..
                lineColor: 'red',      // Color de borde de los puntos dibujados cuando el 
                                       // ratón se acerca a un punto de recorrido.
                trackDecimals: 1,      // Decimales para los valores mostrados.
                sensibility: 200,      // Mientras más bajo, más precisión necesitas
                                       // para que se muestre un valor.
                radius: 4              // Radio del punto de seguimiento.
            },
            shadowSize: 2          // Tamaño de la sombra 'de pega'.
        });
    });    
</script>

</body>
</html>

